<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import router from '@/router';
const value = ref(1);

const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('a');


const columns = [
  {
    text: '22002319',
    value: '1',
    children: [
      {
        text: '许志伟',
        value: '',
        children: [
          { text: '22软件技术3班', value: '' },

        ],
      },
    ],
  },
  {
    text: '22002318',
    value: '2',
    children: [
      {
        text: '谢竞贤',
        value: '',
        children: [
          { text: '22软件3班', value: '' },

        ],
      },

    ],
  },
  {
    text: '12345678',
    value: '3',
    children: [
      {
        text: '刁健忠',
        value: '',
        children: [
          { text: '22软件1班', value: '' },

        ],
      },

    ],
  },
  {
    text: '22000000',
    value: '4',
    children: [
      {
        text: '周盛华',
        value: '',
        children: [
          { text: '22软件1班', value: '' },

        ],
      },

    ],
  },
  {
    text: '11111111',
    value: '5',
    children: [
      {
        text: '罗勇胜',
        value: '',
        children: [
          { text: '22软件1班', value: '' },

        ],
      },

    ],
  },

];


const option1 = [
  { text: '组件化开发', value: 0 },
  { text: '开发初体验', value: 1 },
  { text: '路由的使用', value: 2 },
];
const option2 = [
  { text: '班级', value: 'a' },
  { text: '22软件3班', value: 'b' },
  { text: '22软件1班', value: 'c' },

];
const option3 = [
  { text: '筛选', value: 'a' },
  { text: '小组任务', value: 'b' },


]
</script>


<template>
  
  <div class="container">
    <van-button type="primary" @click="router.push('/home')" style="margin-bottom: 20px;">返回</van-button>

    <van-dropdown-menu style="width: 400px;margin-bottom: 20px;">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <div>
      <p>
        课程：前端框架应用项目开发
      </p>
      <h2>
        任务：Vue3组件化开发【权重:10.0%】
      </h2>
      <p>
        完成截止时间：<font style="color: red;">2024/03/31 23:59:59</font>
      </p>
      <p>简介：熟练掌握Vue3的组件化开发方法，将上一任务的todolist项目进行组件化拆分。，并进行打包发布压缩上传，不能在线正常浏览网页效果者不得分！</p>
    </div>

    <van-picker title="学生" :columns="columns"    />

    <div style="display: flex;">
  <van-stepper v-model="value" style="margin-top: 20px;margin-left: 20px;"/>
  <van-cell-group inset style="margin: 10px;">
    <van-field v-model="value" label="前往"  />
</van-cell-group>
</div>
 

  </div>



</template>